<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="'搜索: ' + ${keyword} + ' - 商品商城'">搜索结果 - 商品商城</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4e73df;
            --secondary-color: #858796;
            --success-color: #1cc88a;
            --info-color: #36b9cc;
            --warning-color: #f6c23e;
            --danger-color: #e74a3b;
            --light-color: #f8f9fc;
            --dark-color: #5a5c69;
        }

        body {
            font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8f9fc;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
        }

        .page-header {
            background: linear-gradient(135deg, var(--primary-color) 0%, #667eea 100%);
            color: white;
            padding: 2rem 0;
            margin-bottom: 2rem;
        }

        .card {
            border: none;
            border-radius: 0.5rem;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
            transition: all 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0.25rem 2rem 0 rgba(58, 59, 69, 0.2);
        }

        .product-card {
            margin-bottom: 1.5rem;
            overflow: hidden;
        }

        .product-card .card-img-top {
            height: 200px;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .product-card:hover .card-img-top {
            transform: scale(1.05);
        }

        .product-price {
            font-weight: 700;
            color: var(--danger-color);
            font-size: 1.2rem;
        }

        .product-original-price {
            text-decoration: line-through;
            color: var(--secondary-color);
            font-size: 0.9rem;
        }

        .badge-hot {
            background-color: var(--danger-color);
        }

        .badge-new {
            background-color: var(--success-color);
        }

        .filter-section {
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .sort-section {
            background-color: white;
            border-radius: 0.5rem;
            padding: 1rem;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
            margin-bottom: 1.5rem;
        }

        .search-query {
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
            padding: 1rem;
            margin-bottom: 1.5rem;
        }

        .pagination {
            justify-content: center;
        }

        .page-link {
            color: var(--primary-color);
            border-color: #e3e6f0;
            margin: 0 0.2rem;
            border-radius: 0.35rem;
        }

        .page-item.active .page-link {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .no-products {
            text-align: center;
            padding: 3rem 0;
            color: var(--secondary-color);
        }

        .no-products i {
            font-size: 4rem;
            margin-bottom: 1rem;
        }

        .search-suggestions {
            margin-top: 1rem;
        }

        .suggestion-tag {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            background-color: var(--light-color);
            border-radius: 1rem;
            font-size: 0.85rem;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            color: var(--dark-color);
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .suggestion-tag:hover {
            background-color: var(--primary-color);
            color: white;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
        <div class="container">
            <a class="navbar-brand" href="/shop">
                <i class="bi bi-shop"></i> 商品商城
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/shop">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/shop/products">所有商品</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/shop/categories">商品分类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/shop/promotions">促销商品</a>
                    </li>
                </ul>
                <form class="d-flex me-3" action="/shop/search" method="get">
                    <input class="form-control me-2" type="search" name="keyword" placeholder="搜索商品..." th:value="${keyword}">
                    <button class="btn btn-outline-primary" type="submit">
                        <i class="bi bi-search"></i>
                    </button>
                </form>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle"></i> 我的账户
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/auth/login">登录</a></li>
                            <li><a class="dropdown-item" href="/auth/register">注册</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/shop/profile">个人中心</a></li>
                            <li><a class="dropdown-item" href="/shop/orders">我的订单</a></li>
                            <li><a class="dropdown-item" href="/shop/cart">购物车</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 页面头部 -->
    <div class="page-header">
        <div class="container">
            <h1 class="fw-bold">搜索结果</h1>
            <p class="lead mb-0" th:text="'关键词: ' + ${keyword}">关键词</p>
        </div>
    </div>

    <div class="container">
        <!-- 搜索查询信息 -->
        <div class="search-query">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h5 th:text="'搜索 "' + ${keyword} + '" 的结果'">搜索关键词的结果</h5>
                    <p class="text-muted mb-0" th:text="'找到 ' + ${total} + ' 件相关商品'">找到 0 件相关商品</p>
                </div>
                <div class="col-md-4 text-end">
                    <form action="/shop/search" method="get" class="d-flex">
                        <input class="form-control me-2" type="search" name="keyword" placeholder="重新搜索..." th:value="${keyword}">
                        <button class="btn btn-primary" type="submit">
                            <i class="bi bi-search"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 左侧筛选栏 -->
            <div class="col-lg-3">
                <!-- 分类筛选 -->
                <div class="filter-section">
                    <h5 class="mb-3">商品分类</h5>
                    <div class="list-group list-group-flush">
                        <a th:each="category : ${categories}" 
                           th:href="@{/shop/search(keyword=${keyword}, categoryId=${category.id})}"
                           class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
                           th:classappend="${categoryId != null and categoryId == category.id} ? 'active'">
                            <span th:text="${category.categoryName}">分类名称</span>
                            <span class="badge bg-primary rounded-pill" th:text="${category.productCount}">0</span>
                        </a>
                    </div>
                </div>

                <!-- 价格筛选 -->
                <div class="filter-section">
                    <h5 class="mb-3">价格区间</h5>
                    <form action="/shop/search" method="get">
                        <input type="hidden" name="keyword" th:value="${keyword}">
                        <div class="mb-3">
                            <label for="minPrice" class="form-label">最低价格</label>
                            <input type="number" class="form-control" id="minPrice" name="minPrice" th:value="${minPrice}" min="0">
                        </div>
                        <div class="mb-3">
                            <label for="maxPrice" class="form-label">最高价格</label>
                            <input type="number" class="form-control" id="maxPrice" name="maxPrice" th:value="${maxPrice}" min="0">
                        </div>
                        <button type="submit" class="btn btn-primary w-100">应用筛选</button>
                    </form>
                </div>

                <!-- 搜索建议 -->
                <div class="filter-section" th:if="${suggestions != null and !#lists.isEmpty(suggestions)}">
                    <h5 class="mb-3">搜索建议</h5>
                    <div class="search-suggestions">
                        <a th:each="suggestion : ${suggestions}" 
                           th:href="@{/shop/search(keyword=${suggestion})}"
                           class="suggestion-tag" 
                           th:text="${suggestion}">建议关键词</a>
                    </div>
                </div>
            </div>

            <!-- 右侧商品列表 -->
            <div class="col-lg-9">
                <!-- 排序栏 -->
                <div class="sort-section">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <span class="text-muted" th:text="'共找到 ' + ${total} + ' 件商品'">共找到 0 件商品</span>
                        </div>
                        <div class="col-md-6 text-end">
                            <div class="btn-group" role="group">
                                <input type="radio" class="btn-check" name="sort" id="sort-default" autocomplete="off" 
                                       th:checked="${sortBy == null or sortBy == 'created_at'}">
                                <label class="btn btn-outline-primary" for="sort-default">
                                    <a th:href="@{/shop/search(keyword=${keyword}, categoryId=${categoryId}, minPrice=${minPrice}, maxPrice=${maxPrice}, sortBy='created_at', sortOrder='desc')}" class="text-decoration-none">默认</a>
                                </label>

                                <input type="radio" class="btn-check" name="sort" id="sort-sales" autocomplete="off" 
                                       th:checked="${sortBy == 'sales_count'}">
                                <label class="btn btn-outline-primary" for="sort-sales">
                                    <a th:href="@{/shop/search(keyword=${keyword}, categoryId=${categoryId}, minPrice=${minPrice}, maxPrice=${maxPrice}, sortBy='sales_count', sortOrder='desc')}" class="text-decoration-none">销量</a>
                                </label>

                                <input type="radio" class="btn-check" name="sort" id="sort-price-asc" autocomplete="off" 
                                       th:checked="${sortBy == 'sale_price' and sortOrder == 'asc'}">
                                <label class="btn btn-outline-primary" for="sort-price-asc">
                                    <a th:href="@{/shop/search(keyword=${keyword}, categoryId=${categoryId}, minPrice=${minPrice}, maxPrice=${maxPrice}, sortBy='sale_price', sortOrder='asc')}" class="text-decoration-none">价格↑</a>
                                </label>

                                <input type="radio" class="btn-check" name="sort" id="sort-price-desc" autocomplete="off" 
                                       th:checked="${sortBy == 'sale_price' and sortOrder == 'desc'}">
                                <label class="btn btn-outline-primary" for="sort-price-desc">
                                    <a th:href="@{/shop/search(keyword=${keyword}, categoryId=${categoryId}, minPrice=${minPrice}, maxPrice=${maxPrice}, sortBy='sale_price', sortOrder='desc')}" class="text-decoration-none">价格↓</a>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 商品列表 -->
                <div class="row" th:if="${products != null and !#lists.isEmpty(products)}">
                    <div class="col-md-4 col-sm-6" th:each="product : ${products}">
                        <div class="card product-card">
                            <div class="position-relative">
                                <img th:src="${product.imageUrl ?: '/images/product-placeholder.jpg'}" class="card-img-top" th:alt="${product.productName}">
                                <div class="position-absolute top-0 end-0 p-2">
                                    <span th:if="${product.isHot}" class="badge badge-hot">热销</span>
                                    <span th:if="${product.isNew}" class="badge badge-new">新品</span>
                                </div>
                            </div>
                            <div class="card-body">
                                <h5 class="card-title" th:text="${product.productName}">商品名称</h5>
                                <p class="card-text text-muted small" th:text="${product.categoryName}">分类名称</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <span class="product-price" th:text="'¥' + ${#numbers.formatDecimal(product.salePrice, 1, 2)}">¥99.99</span>
                                        <span th:if="${product.salePrice < product.purchasePrice * 1.2}" class="product-original-price ms-2" th:text="'¥' + ${#numbers.formatDecimal(product.purchasePrice * 1.2, 1, 2)}">¥129.99</span>
                                    </div>
                                    <a th:href="@{/shop/product/{id}(id=${product.id})}" class="btn btn-sm btn-primary">查看详情</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 无商品提示 -->
                <div class="no-products" th:if="${products == null or #lists.isEmpty(products)}">
                    <i class="bi bi-search"></i>
                    <h4>未找到相关商品</h4>
                    <p>尝试使用其他关键词或浏览所有商品</p>
                    <a href="/shop/products" class="btn btn-primary">浏览所有商品</a>
                </div>

                <!-- 分页 -->
                <nav th:if="${totalPages > 1}" aria-label="搜索结果分页">
                    <ul class="pagination">
                        <li class="page-item" th:classappend="${currentPage == 1} ? 'disabled'">
                            <a class="page-link" th:href="@{/shop/search(keyword=${keyword}, categoryId=${categoryId}, minPrice=${minPrice}, maxPrice=${maxPrice}, sortBy=${sortBy}, sortOrder=${sortOrder}, page=${currentPage - 1})}" tabindex="-1">
                                <i class="bi bi-chevron-left"></i>
                            </a>
                        </li>
                        
                        <li th:each="i : ${#numbers.sequence(1, totalPages)}" 
                            class="page-item" th:classappend="${i == currentPage} ? 'active'">
                            <a class="page-link" th:href="@{/shop/search(keyword=${keyword}, categoryId=${categoryId}, minPrice=${minPrice}, maxPrice=${maxPrice}, sortBy=${sortBy}, sortOrder=${sortOrder}, page=${i})}" th:text="${i}">页码</a>
                        </li>
                        
                        <li class="page-item" th:classappend="${currentPage == totalPages} ? 'disabled'">
                            <a class="page-link" th:href="@{/shop/search(keyword=${keyword}, categoryId=${categoryId}, minPrice=${minPrice}, maxPrice=${maxPrice}, sortBy=${sortBy}, sortOrder=${sortOrder}, page=${currentPage + 1})}">
                                <i class="bi bi-chevron-right"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>